<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV拉伸放大效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .box {
            position: absolute;
            right: 20px;
            /* bottom: 20px; */
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            padding: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
            z-index: 10;
            overflow: hidden;
        }
        
        .box:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
        }
        
        .box.expanded {
            animation: expand 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
        }
        
        .content {
            opacity: 0;
            padding: 30px;
            transition: opacity 0.5s 0.5s;
            max-width: 90%;
            text-align: center;
        }
        
        .expanded .content {
            opacity: 1;
        }
        
        h2 {
            margin-bottom: 20px;
            color: #2d3436;
            font-size: 28px;
        }
        
        p {
            line-height: 1.6;
            color: #2d3436;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background: #ff6b6b;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.3s 0.8s, transform 0.3s;
        }
        
        .expanded .close-btn {
            opacity: 1;
        }
        
        .close-btn:hover {
            transform: rotate(90deg);
        }
        
        .controls {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .controls h3 {
            margin-bottom: 10px;
            color: #2d3436;
        }
        
        .control-group {
            margin-bottom: 10px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #2d3436;
        }
        
        input[type="range"] {
            width: 250px;
        }
        
        /* clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 */
        /* polygon 定义四个角的坐标 */
        @keyframes expand {
            0% {
                right: 20px;
                width: 60px;
                height: 60px;
                border-radius: 8px;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
            }
            30% {
                clip-path: polygon(0 0, 20% 0, 100% 80%, 0 100%);
                border-radius: 15px;
            }
            60% {
                clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
                border-radius: 10px;
            }
            100% {
                right: 50%;
                bottom: 50%;
                width: 70vw;
                height: 70vh;
                max-width: 800px;
                max-height: 500px;
                transform: translate(50%, 50%);
                border-radius: 20px;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
        
        .instructions {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            max-width: 300px;
        }
        
        .instructions h3 {
            margin-bottom: 10px;
            color: #2d3436;
        }
        
        .instructions p {
            font-size: 14px;
            line-height: 1.4;
            color: #2d3436;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" id="expandable-box">
            <div class="initial-text">点击展开</div>
            <div class="content">
                <h2>CSS变形动画效果</h2>
                <p>这个DIV从右下角的小方块状态开始，通过自定义的动画效果放大到屏幕中央。</p>
                <p>在放大过程中，使用了clip-path属性创建了左侧高度大于右侧的拉伸畸变效果。</p>
                <p>这种效果可以为用户界面添加独特的视觉体验和动态感。</p>
            </div>
            <div class="close-btn">X</div>
        </div>
    </div>
    
    <div class="instructions">
        <h3>使用说明</h3>
        <p>点击右下角的小方块查看放大效果</p>
        <p>点击右上角的X按钮关闭</p>
        <p>动画展示了拉伸畸变效果</p>
    </div>
    
    <div class="controls">
        <h3>动画控制</h3>
        <div class="control-group">
            <label for="duration">动画时长: <span id="duration-value">1.2</span> 秒</label>
            <input type="range" id="duration" min="0.5" max="3" step="0.1" value="1.2">
        </div>
        <div class="control-group">
            <label for="distortion">畸变程度: <span id="distortion-value">20</span>%</label>
            <input type="range" id="distortion" min="0" max="50" value="20">
        </div>
        <button id="reset-btn">重置动画</button>
    </div>

    <script>
        const box = document.getElementById('expandable-box');
        const closeBtn = document.querySelector('.close-btn');
        const resetBtn = document.getElementById('reset-btn');
        const durationSlider = document.getElementById('duration');
        const durationValue = document.getElementById('duration-value');
        const distortionSlider = document.getElementById('distortion');
        const distortionValue = document.getElementById('distortion-value');
        
        // 点击展开
        box.addEventListener('click', function(e) {
            if (!box.classList.contains('expanded') && e.target !== closeBtn) {
                updateAnimation();
                box.classList.add('expanded');
            }
        });
        
        // 点击关闭
        closeBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            box.classList.remove('expanded');
        });
        
        // 重置动画
        resetBtn.addEventListener('click', function() {
            box.classList.remove('expanded');
            setTimeout(() => {
                updateAnimation();
            }, 50);
        });
        
        // 更新动画参数
        function updateAnimation() {
            const duration = durationSlider.value;
            const distortion = distortionSlider.value;
            
            // 更新显示值
            durationValue.textContent = duration;
            distortionValue.textContent = distortion;
            
            // 创建样式表（如果不存在）
            if (!document.getElementById('dynamic-styles')) {
                const style = document.createElement('style');
                style.id = 'dynamic-styles';
                document.head.appendChild(style);
            }
            
            // 更新关键帧
            const styleSheet = document.getElementById('dynamic-styles');
            styleSheet.textContent = `
                @keyframes expand {
                    0% {
                        right: 20px;
                        width: 60px;
                        height: 60px;
                        border-radius: 8px;
                        clip-path: polygon(30% 15%, 70% 15%, 70% 85%, 30% 85%);
                    }
                    30% {
                        clip-path: polygon(20% 10%, 80% ${distortion}%, 80% ${100-distortion}%, 20% 90%);
                        border-radius: 15px;
                    }
                    60% {
                        clip-path: polygon(10% 5%, 90% ${distortion/2}%, 90% ${100-distortion/2}%, 10% 95%);
                        border-radius: 10px;
                    }
                    100% {
                        right: 50%;
                        bottom: 50%;
                        width: 70vw;
                        height: 70vh;
                        max-width: 800px;
                        max-height: 500px;
                        transform: translate(50%, 50%);
                        border-radius: 20px;
                        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                    }
                }
                
                .box.expanded {
                    animation: expand ${duration}s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
                }
                
                .expanded .content {
                    transition: opacity 0.5s ${duration/2}s;
                }
                
                .expanded .close-btn {
                    transition: opacity 0.3s ${duration-0.4}s;
                }
            `;
        }
        
        // 初始化滑块事件
        durationSlider.addEventListener('input', function() {
            durationValue.textContent = durationSlider.value;
            if (box.classList.contains('expanded')) {
                updateAnimation();
            }
        });
        
        distortionSlider.addEventListener('input', function() {
            distortionValue.textContent = distortionSlider.value;
            if (box.classList.contains('expanded')) {
                updateAnimation();
            }
        });
        
        // 初始化
        updateAnimation();
    </script>
</body>
</html>